import React, {useRef, useState} from "react";
import {Button, Carousel, Flex, Input, Modal, Radio, RadioChangeEvent} from "antd";
import {CarouselRef} from "antd/es/carousel";
import {createStyles} from "antd-style";
import {KeyOutlined, SmileOutlined, UserOutlined} from "@ant-design/icons";
import UserApi from "@/api/UserApi.ts";
import {useUserInfoStore} from "@/store/BaseStore.ts";
import {CreateUserVo} from "@/api/Objects/UserTypes.ts";

interface IUserLoginModal {
    /**
     * 对话框展开的状态
     */
    open: boolean,
    /**
     * 设置对话框展开的状态
     * @param open 对话框展开的状态
     */
    setOpen: (open: boolean) => void
}

const useStyles = createStyles(({css, token}) => {
    return {
        formContainer: css`
            display: flex;
            flex-direction: column;
            padding: 30px 20px;

            li {
                padding: 5px 0;
            }
        `
    }
})

/**
 * 用户登录对话框
 * @param open 显示状态
 * @param setOpen 设置显示状态
 * @constructor
 */
const UserLoginModal: React.FC<IUserLoginModal> = ({open, setOpen}) => {
    const [confirmLoading, setConfirmLoading] = useState(false)
    const loginCarousel = useRef<CarouselRef>()
    const styles = useStyles().styles;
    const saveUserInfo = useUserInfoStore(state => state.saveUserInfo);

    interface ILoginFormData extends CreateUserVo {
        password2: string
    }

    const [formPage, setFormPage] = useState(0)

    const [loginFormData, setLoginFormData] = useState<ILoginFormData>({
        account: "",
        nickName: "",
        password: "",
        password2: ""
    })

    const onSubmit = () => {
        setConfirmLoading(true)

        const login = () => {
            UserApi.login(loginFormData).then(res => {
                if (res.status) {
                    UserApi.getSelfInfo().then(data => {
                        saveUserInfo(data)
                        setConfirmLoading(false)
                        setOpen(false)
                        window.messageApi.success("登录成功").then()
                    })
                }
            })
        }

        switch (formPage) {
            case 0: {
                login()
                break
            }
            case 1: {
                UserApi.createUser(loginFormData)
                    .then(() => {
                        login()
                    })
                break
            }
        }
    }

    const logout = () => {
        UserApi.logout().then((data) => {
            if (data.status) {
                window.messageApi.info('退出登录').then()
            } else {
                window.messageApi.info(data.msg).then()
            }
            saveUserInfo(null)
        })
    }

    return (
        <Modal
            open={open}
            onCancel={() => {
                setOpen(!open)
            }}
            closable={false}
            confirmLoading={confirmLoading}
            footer={
                <Flex justify="space-around">
                    <Button.Group>
                        <Button type="primary" onClick={onSubmit}>确定</Button>
                        <Button onClick={logout}>退出登录</Button>
                    </Button.Group>
                    <Radio.Group onChange={(e: RadioChangeEvent) => {
                        loginCarousel.current.goTo(e.target.value)
                        setFormPage(e.target.value)
                    }} defaultValue={0}>
                        <Radio.Button value={0}>登录页面</Radio.Button>
                        <Radio.Button value={1}>注册页面</Radio.Button>
                    </Radio.Group>
                </Flex>
            }
        >
            <Carousel
                arrows={false}
                autoplay={false}
                dots={false}
                infinite={false}
                centerPadding="true"
                ref={loginCarousel}
            >
                <ul className={styles.formContainer}>
                    <li>
                        {/* todo 完成输入参数的验证 */}
                        <Input prefix={<UserOutlined/>}
                               placeholder="账号"
                               value={loginFormData.account}
                               onChange={(e) => {
                                   setLoginFormData({
                                       ...loginFormData,
                                       account: e.target.value
                                   })
                               }}/>
                    </li>
                    <li>
                        <Input.Password prefix={<KeyOutlined/>}
                                        placeholder="密码"
                                        value={loginFormData.password}
                                        onChange={(e) => {
                                            setLoginFormData({
                                                ...loginFormData,
                                                password: e.target.value
                                            })
                                        }}/>
                    </li>
                </ul>
                <ul className={styles.formContainer}>
                    <li>
                        <Input prefix={<SmileOutlined/>}
                               placeholder="昵称"
                               value={loginFormData.nickName}
                               onChange={(e) => {
                                   setLoginFormData({
                                       ...loginFormData,
                                       nickName: e.target.value
                                   })
                               }}/>
                    </li>
                    <li>
                        <Input prefix={<UserOutlined/>}
                               placeholder="账号"
                               value={loginFormData.account}
                               onChange={(e) => {
                                   setLoginFormData({
                                       ...loginFormData,
                                       account: e.target.value
                                   })
                               }}/>
                    </li>
                    <li>
                        <Input.Password prefix={<KeyOutlined/>}
                                        placeholder="密码"
                                        value={loginFormData.password}
                                        onChange={(e) => {
                                            setLoginFormData({
                                                ...loginFormData,
                                                password: e.target.value
                                            })
                                        }}/>
                    </li>
                    <li>
                        <Input.Password prefix={<KeyOutlined/>}
                                        placeholder="确认密码"
                                        value={loginFormData.password2}
                                        onChange={(e) => {
                                            setLoginFormData({
                                                ...loginFormData,
                                                password2: e.target.value
                                            })
                                        }}/>
                    </li>
                </ul>
            </Carousel>
        </Modal>
    )
}

export default UserLoginModal